<template>
	<div class="avatar-uploader">
		<el-upload
			:action="uploadURL"
			:data="uploadData"
			:show-file-list="false"
			:on-success="uploadSuccess"
			:before-upload="beforeUpload"
			accept="image/*">

			<i v-show="loading" class="el-icon-loading avatar-uploader-icon"></i>
			<img v-show="preview" :src="preview" class="avatar">

			<i v-show="!loading && !preview" class="el-icon-camera-solid avatar-uploader-icon cameraIcon"></i>
      <p class="text">点击上传</p>
		</el-upload>

		<div class="icons" v-if="preview">
			<i class="el-icon-view" @click.stop="view" v-if="false"></i>
			<i class="el-icon-delete" @click.stop="remove"></i>
		</div>

		<el-dialog :visible.sync="dialogVisible" width="70%">
			<div style="text-align: center;"><img :src="source" alt="" style="max-width: 100%;"></div>
		</el-dialog>
	</div>
</template>

<script>
	//import sign from '@/utils/apisign.js'

	export default {
		name: "single_image_upload",
		props: {
			imagePreview: {
				type: String
			},
			imageSource: {
				type: String
			},
		},
		watch: {
			imagePreview: function(value) {
				this.preview = value
			},
			imageSource: function(value) {
				this.source = value
			},
		},
		data() {
			return {
				/*		控制加载中		*/
				loading: false,
				/*		控制加载中		*/

				/*		控制查看图片		*/
				preview: "",
				source: "",
				dialogVisible: false,
				/*		控制查看图片		*/

				/*		文件上传控制数据		*/
				uploadURL: 'https://jsonplaceholder.typicode.com/posts/',//this.$store.state.imageUploadURL
				uploadData: {},
				/*		文件上传控制数据		*/
			}
		},
		methods: {
			/*		图片上传前的处理	*/
			beforeUpload(file) {
				this.loading = true

				let allowTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']

				if (allowTypes.indexOf(file.type) == -1) {
					this.$message.error('只能上传 jpg、png 或 gif 的图片')

					return false
				}

				//this.uploadData = sign()

				let promise = new Promise((resolve) => {
					this.$nextTick(function () {
						resolve(true)
					})
				})

				return promise
			},
			uploadSuccess(res) {
				this.loading = false

				if (res.status) {
					this.preview = res.preview
					this.source = res.source

					this.$emit('change', res.file)
				} else {
					this.$message.error(res.error_text)
				}
			},
			remove() {
				this.preview = ''
				this.source = ''

				this.$emit('change', '')
			},
			view() {
				this.dialogVisible = true
			}
		}
	}
</script>

<style>
.avatar-uploader .cameraIcon{
    height: 30px;
    line-height: 30px;
    margin-top: 32px;
}
.avatar-uploader .text{
  margin:0px;
  color: #8c939d;
}
.avatar-uploader {
	width: 120px;
	height: 120px;
	border: 1px dashed #bbb;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.icons {
	position: absolute;
	display: none;
	width: 120px;
	height: 120px;
	line-height: 120px;
	left: 0;
	top: 0;
	z-index: 1000;
	background: #000;
	opacity: 0.75;
	text-align: center;
}
.icons i {
	margin: 0 10px;
	font-size: 24px;
	color: #fff;
}
.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}
.avatar-uploader:hover .icons {
	display: block;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 120px;
	height: 120px;
	line-height: 120px;
	text-align: center;
}
.avatar {
	width: 120px;
	height: 120px;
	display: block;
}
</style>
